<template>
  <div class="preview-main">
    <img class="preview-bg" src="/static/images/bg_default.png"></img>
    <div class="preview-content">
      <img class="arrow-prev" src="/static/images/arrow_prev.png"></img>
      <video autoplay controls width="800px" height="450px" :poster="currentPoster" type="video/mp4" src="http://121.201.7.173/bbt_weixin/video/20160607/6293330538881745634.mp4"></video>
      <img class="arrow-next" src="/static/images/arrow_next.png"></img>
    </div>
    <avatar class="preview-avatar" avatar-src="currentAvatar" :avatar-size="84"></avatar>
    <like-button v-ref:btn-like class="preview-like" :asset='likeButtonAsset'></like-button>
    <div class="preview-like-count"><img src="/static/images/heart.png" /><span>100</span></div>
  </div>
</template>

<script type="text/babel">
  import Avatar from './widgets/Avatar'
  import LikeButton from './widgets/LikeButton'
  import KeyEventComponentMixin from './KeyEventComponentMixin'
  import KeyEvent from '../libs/KeyEvent'

  export default {
    mixins: [ KeyEventComponentMixin ],
    data () {
      return {
        currentIndex: 0,
        totalSize: 0,
        likeButtonAsset: this.$assetsManager.getAsset('btn_like'),
        previewItems: [],
        currentItem: undefined,
        currentPoster: '',
        currentVideoSrc: '',
        currentAvatar: ''
      }
    },
    route: {
      activate: function (transition) {
        if (this.$wanbaClient.clientEnv()) {
          this.$wanbaClient.clientInterface().nextPage()
        }
        transition.next()
      }
    },
    ready: function () {
      var self = this
      self.$refs.btnLike.focused()

      var arr = 'http://121.201.7.173/bbt_weixin/video/20160607/6293330538881745634,http://121.201.7.173/bbt_weixin/video/20160607/6293376709780180578,http://121.201.7.173/bbt_weixin/video/20160607/6293376761319788136,http://121.201.7.173/bbt_weixin/video/20160607/6293376804269461105'.split(',')
      arr.forEach(function (item) {
        this.push({
          videoSrc: item + '.mp4',
          poster: item + '.jpg',
          avatar: '/static/images/demo_avatar.jpg'
        })
      }, self.previewItems)
    },
    components: {
      Avatar,
      LikeButton
    },
    watch: {
      'currentIndex': function (newVal, oldVal) {
        if (this.previewItems.length > newVal) {
          this.currentItem = this.previewItems[newVal]
        }
      },
      'previewItems': function (newVal, oldVal) {
        if (newVal.length > this.currentIndex) {
          this.currentItem = newVal[this.currentIndex]
        } else {
          this.currentItem = undefined
        }
      },
      'currentItem': function (newVal, oldVal) {
        if (newVal) {
          this.currentVideoSrc = newVal.videoSrc
          this.currentPoster = newVal.poster
          this.currentAvatar = newVal.avatar
        } else {
          this.currentVideoSrc = ''
          this.currentPoster = ''
          this.currentAvatar = ''
        }
      }
    },
    methods: {
      onKeyUp: function (keyEvent) {
        var self = this
        if (keyEvent.keyCode === KeyEvent.KEYCODE_BACK) {
          self.$router.go({
            name: 'newest',
            replace: true
          })
        } else if (keyEvent.keyCode === KeyEvent.KEYCODE_DPAD_LEFT) {
          let currIndex = self.currentIndex
          currIndex--
          if (currIndex < 0) {
            currIndex = 0
          }
          self.currentIndex = currIndex
        } else if (keyEvent.keyCode === KeyEvent.KEYCODE_DPAD_RIGHT) {
          let currIndex = self.currentIndex
          currIndex++
          if (currIndex >= self.previewItems.length) {
            currIndex = self.previewItems.length - 1
          }
          self.currentIndex = currIndex
        }
        return true
      }
    }
  }
</script>

<style scoped>
  .preview-main {
    position: relative;
    top: 0;
    left: 0;
  }

  .preview-bg {
    position: absolute;
    top: 0;
    left: 0;
  }

  .preview-content {
    position: absolute;
    top: 80px;
    left: 90px;
  }

  .preview-content video {
    vertical-align: middle;
  }

  .arrow-prev {
    margin-right: 80px;
  }

  .arrow-next {
    margin-left: 80px;
  }

  .preview-avatar {
    position: absolute;
    top: 38px;
    left: 590px;
  }

  .preview-like {
    position: absolute;
    top: 570px;
    left: 530px;
  }

  .preview-like-count {
    position: absolute;
    top: 80px;
    left: 1050px;
    font-size: 36px;
    font-weight: bolder;
    display: inline-block;
  }

  .preview-like-count * {
    vertical-align: middle;
  }

  .preview-like-count img {
  }

  .preview-like-count span {
    margin-left: 8px;
    font-weight: bolder;
    color: #a80000;
    -webkit-text-stroke-color: #fff;
    -webkit-text-stroke-width: 2px;
    text-stroke-color: #fff;
    text-stroke-width: 2px;
  }
</style>